<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>散点图数据展示</title>
    <link rel="stylesheet" href="../static/assets/css/index.css">
    <!-- <link rel="stylesheet" href="./css/demo.css"> -->
    <link rel="stylesheet" href="../static/assets/font/iconfont.css">
    <!-- <script src="./js/index.js"></script> -->
    <link rel="stylesheet" href="../static/assets/css/110.css">
    <script src="../static/assets/js/echarts.min.js"></script>

</head>
<body>
    <!-- 侧边栏 -->
    <aside class="main-aside">
        <!-- 3D动态盒 -->
        <div class="header3D">
            <div class="cube" id="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
        </div>
        <!-- 侧边栏选项 -->
        <div class="asideOption">
            <ul>
                <li>
                    <a href="index.html">
                        <span>首页</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bar.html">
                        <span>柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="pie.html">
                        <span>饼图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="line.html">
                        <span>折线图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bubble.html">
                        <span>气泡图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="polar-bar.html">
                        <span>极坐标下的堆积柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
            </ul>



        </div>
        <!-- 旋转图 -->
        <div class="loader">
            <div class="left-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="right-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
    </aside>
    <!-- 头部导航栏 -->
     <div class="headernav">
         <h1>散点图展示-销量与星级</h1>
            <select name="area" id="">
                <option value="西藏" class="one">西藏</option>
                <option value="张家界" class="two">张家界</option>
                <option value="大理" class="three">大理</option>
                <option value="长沙" class="four">长沙</option>
            </select>
        <!-- 时间 -->
        <button id="time" type="text"></button>
    </div>
    <!-- 内容区 -->
    <div class="main-content" style="height: 100%">
        <!-- 内容展示 -->
        <div class="show-content" id="main" style="height: 93%">

        </div>
    </div>



    <!-- 时间 -->
    <script src="../static/assets/js/index.js"></script>
    <!-- 柱状图 -->
     <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
          xAxis: {},
          yAxis: {},
          series: [
            {
              symbolSize: 30,
              data: [
                [100.0, 8.04],
                [8.07, 6.95],
                [13.0, 7.58],
                [9.05, 8.81],
                [11.0, 8.33],
                [14.0, 7.66],
                [13.4, 6.81],
                [10.0, 6.33],
                [14.0, 8.96],
                [12.5, 6.82],
                [9.15, 7.2],
                [11.5, 7.2],
                [3.03, 4.23],
                [12.2, 7.83],
                [2.02, 4.47],
                [1.05, 3.33],
                [4.05, 4.96],
                [6.03, 7.24],
                [12.0, 6.26],
                [12.0, 8.84],
                [7.08, 5.82],
                [5.02, 5.68]
              ],
              type: 'scatter'
            }
          ]
        };

        option && myChart.setOption(option);

     </script>
</body>
</html>